{{extend './_layouts/home.html'}}

{{block 'title'}}{{'多人博客 - 首页'}}{{/block}}

{{block 'body'}}
<div class="row" style="padding: 0px 0px;margin: 0px 0px;">
  <div class="col-md-2">
  </div>
  <div class="col-md-8">
    <section class="container" style="margin-top: 100px;  margin-bottom: 76px;">
      <ul class="media-list">
        {{ each topics topic index}}
          <li class="media" style="margin-top: 20px; margin-bottom: 45px; display: none;">
            {{ if user }}
                <div class="media-left">
                  <a href="#">
                    <img width="40" height="40" class="media-object" src="../public/img/luo.jpg" alt="">
                  </a>
                </div>
            {{ else }}
                <img width="40" height="40" class="media-object" src="../public/img/luo.jpg" alt="">
            {{ /if }}
            <div class="media-body" >
              <input type="text" value="{{ topic.id }}"  style="display: none;">
              <div class="media-title" style="position: relative;">
                <!-- <h4 class="media-heading"><a href="javascript:void(0)" id="detail">{{ topic.title }}</a></h4> 头像{{topic.publisher_avatar}} -->
                <a href="/topics/show?id={{topic.id}}&p_id={{topic.publisher_id}}" id="detail" style="margin-left: 5px;">{{ topic.title }}</a>
                <span style="position: absolute; right: 20%;">发表人：{{topic.publisher}}</span>
              </div>
              <div class="media-content" style="position: relative;">
                <p style="position: absolute; left: 0px;">{{topic.content}}
                  <div>
                    <span style="position: absolute;right: 50%;">浏览{{topic.readNum}}</span>
                    <time style="position: absolute; right: 20%;">{{topic.createtime}}</time>
                  </div>
                </p>
                
              </div>
            </div>
          </li>
        {{ /each }}
      </ul>
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <nav aria-label="Page navigation">
            <ul class="pagination">
              <li class="page">
                <b>
                  <input type="button" value="首页" onClick='firstPage()'>
                </b>
              </li>&nbsp;
              <li class="page">
                <a class="last-page"  aria-hidden="true">&lt;&nbsp;&nbsp;</a>
              </li>
              <li id="currentPage" class="page">1</li>
              <li>/</li>
              <li id="totalPage" class="page">1</li>
              <li class="page">
                <a class="next-page" disabled="" aria-hidden="true">
                  &nbsp;&nbsp;&gt;
                </a>
              </li>&nbsp;
              <li class="page">
                <b>
                  <input type="button" value="尾页" onClick='lastPage()'>
                </b>
              </li>
              <li class="page">
                <span class="jump-to">&nbsp;<b>跳转</b>&nbsp;</span>
              </li>  
              <li class="page">
                <input type="text" class="input-value" value="1" id="toPage" style="width: 40px;">
              </li>
              &nbsp;
              <li class="page">
                <b>
                  <input type="button" value="确定" onClick='gotoPage()'>
                </b>
              </li>
           </ul>
          </nav>
        </div>
        <div class="col-md-3"></div>
      </div>
    </section>
  </div>
  <div class="col-md-2">
  </div>
</div>

{{/block}}
{{block 'script'}}
<script>
  $(document).ready(function() {

    // 获取li的长度来判断第一页显示多少
    let len =  $('ul li.media').length;
    let totalPage = Math.ceil(len/10);
    let currentPageStore = localStorage['currentPage']
    console.log('currentPageStore', currentPageStore);
    if(currentPageStore) {
      currentPageStore = currentPageStore
    }else {
      currentPageStore = 1;
    }
    $('#totalPage').html(totalPage)
    $('#currentPage').html(currentPageStore);
    pagination(currentPageStore, totalPage, len);
    
    

    //  上一页
    $(document).on('click', '.last-page', function() {
      console.log('上一页');
      var currPage = parseInt($('#currentPage').html());
      var lastPage = currPage-1;
      if(lastPage < 1){
        $('#currentPage').html(1);
      }else{
        $('#currentPage').html(lastPage);
        pagination(lastPage, totalPage, len); 
      }
    })
    // 下一页

    $(document).on('click','.next-page',function(){
      console.log('下一页');
      var currPage = parseInt($('#currentPage').html());
      var nextPage = currPage+1;
      var pageCount = $('#totalPage').html();
      if(nextPage <= pageCount){
        $('#currentPage').html(nextPage);
        pagination(nextPage, totalPage, len);
      }else{
        $('#currentPage').html(pageCount);
      }
    });
  })
  
  // 分页处理
  function pagination(currentPage, totalPage, len){
      console.log('currentPage', currentPage, 'totalPage', totalPage);
      // $('ul li.media')[0].style.display = 'none'
      let minStartNode = currentPage*10 - 10;
      let maxEndNode = currentPage*10 -1;
      console.log('minStartNode', minStartNode, 'maxEndNode', maxEndNode, 'len', len);
      if(len > 0) {
        if(minStartNode > 0) {
          for (let f = 0; f < minStartNode; f++) {
            $('ul li.media')[f].style.display = 'none';
          }
        }
        if(len < maxEndNode) {
          for (let i = minStartNode; i < len; i++) {
            $('ul li.media')[i].style.display = '';
          }
        }else {
          for (let j = minStartNode; j < maxEndNode; j++) {
            $('ul li.media')[j].style.display = '';
          }
          for (let h = maxEndNode; h < len; h++) {
            $('ul li.media')[h].style.display = 'none';
          }
        }
      }
      localStorage.setItem('currentPage', currentPage)
    }
 
    
    // 首页
    function firstPage() {
      console.log('首页');
      let len =  $('ul li.media').length;
      let totalPage = Math.ceil(len/10);
      $('#currentPage').html(1);
      pagination(1, totalPage, len);
    }

    // 尾页
    function lastPage() {
      console.log('尾页');
      let len =  $('ul li.media').length;
      let totalPage = Math.ceil(len/10);
      $('#currentPage').html(totalPage);
      pagination(totalPage, totalPage, len);
    }

  // 跳转页面
  function gotoPage() {
    // console.log(totalPage);
    let len =  $('ul li.media').length;
    let totalPage = parseInt($('#totalPage').html());
    let pageNum = parseInt($.trim($('#toPage').val()));
    if(!!pageNum) {
        if(pageNum > totalPage) {
        pageNum = totalPage;
      }else {
        pageNum = pageNum;
      }
    }else {
      alert('请输入数字')
    }
    $('#currentPage').html(pageNum);
    pagination(pageNum, totalPage, len)
    console.log('跳转到', pageNum, '总页:', totalPage);
  }
</script>
{{/block}}
